<template>
	<div class="container box-4">
		<div class="content">
			<p class="beginTime">
				{{end_msg}}
			</p>
			<div class="wrap">
				<p>
					本轮答题正确率为 {{precent}} %
				</p>
				<p v-if="this.$store.state.canLottery">
					恭喜您获得抽奖机会一次
				</p>
				<router-link :to="'draw'" class="btn" v-if="this.$store.state.canLottery">去抽奖</router-link>
			</div>
			<div class="title">本轮活动情况</div>
			<div class="tableWrap">
				<p class="border">
					<span>答对{{right_num}}题</span>
					<span>答错{{all_num - right_num}}题</span>
				</p>
				<p>
					<span>本轮答题累计获得K钻</span>
					<span>{{k_num}}K钻</span>
				</p>
			</div>
			<a href="javascript:;" class="btn" @click="changeBox">查看获奖详情</a>
			<a href="http://shop.3k.com/?ct=goods&ac=index&game_id=1" class="btn">去社区兑换</a>
			<p class="dec">K钻可于3K玩家社区免费兑换礼包、实物</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'score',
		data() {
			return {
				right_num: this.$store.state.score.right_num,
				all_num: this.$store.state.score.all_num,
				k_num: this.$store.state.score.k_num,
				end_msg: this.$store.state.score.end_msg
			}
		},
		computed: {
			precent() {
				let value = Math.round(this.right_num / this.all_num * 100);
				//0 / 0 = NaN => 0 
				return value === value ? value : 0
			}
		},
		methods: {
			changeBox() {
				this.$emit('changeBox', 'record')
			}
		},
		created() {
			console.log(this.precent);
		}
	}
</script>

<style lang="less" scoped>
	@import "../css/_modules.less";

	 @media screen and (orientation: portrait) {
	/*竖屏 css*/
		.box-4 {
			bottom: 0;
		}
		
	}
	.box-4 {
		/*position: relative;
		.xyCenter();*/
		position: absolute;
	    left: 0;
	    right: 0;
	    top: 0;
	    
	    margin: auto;
		.wh(629, 878);
		.bg();
		background-image: url(../img/box-4.png);
		
		@media screen and (orientation: landscape) {
		/*横屏 css*/
		
		}
		.content {
			padding-top: 1rem;
			.beginTime {
				width: 4rem;
				margin: 0 auto;
				line-height: 0.8rem;
				font-size: 0.23rem;
				color: #e8fcff;
				text-align: center;
				border-bottom: 0.02rem dashed #a3cff7;
			}
			.wrap {
				width: 4rem;
				padding: 0.2rem 0;
				margin: 0 auto;
				border-bottom: 0.02rem dashed #a3cff7;
				p {
					line-height: 0.4rem;
					font-size: 0.23rem;
					color: #e8fcff;
					text-align: center;
				}
			}
			.title {
				width: 2.25rem;
				margin: 0 auto;
				line-height: 0.7rem;
				font-size: 0.29rem;
				color: #e8fcff;
				font-weight: bold;
				text-align: center;
				.bg();
				background-image: url(../img/b4-title.png);
			}
			.tableWrap {
				width: 3.0rem;
				min-height: 0.8rem;
				padding: 0 0.3rem;
				margin: 0 auto;
				background-color: #5b8de4;
				border-radius: 0.15rem;
				p {
					.box();
					.box-align(center);
					.box-pack(justify);
					span {
						display: block;
						line-height: 0.6rem;
						font-size: 0.20rem;
						color: #e8fcff;
						text-align: center;
					}
					&.border {
						font-size: 0.24rem;
						border-bottom: 0.02rem dashed #a3cff7;
					}
				}
			}
			.btn {
				margin: 0.2rem auto 0;
				.wh(296, 73);
				line-height: 0.68rem;
				font-size: 0.28rem;
				color: #ac6410;
				/*font-weight: bold;*/
				text-align: center;
				.bg();
				background-image: url(../img/btn-b6.png);
				display: block;
			}
			.dec {
				line-height: 0.5rem;
				font-size: 0.2rem;
				color: #e8fcff;
				text-align: center;
			}
		}
	}
</style>